<%@ page import="car.UsercarImp" %>
<%@ page import="car.Buycar" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="UserService.User" %><%--
  Created by IntelliJ IDEA.
  User: cic
  Date: 2023/10/29
  Time: 18:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>椰子屋购物车</title>
    <style>
        body {
            /*background-image: url("MAIN10.jpeg"); !* 设置背景图片的URL *!*/
            background-color:gainsboro;
            background-repeat: no-repeat; /* 不重复平铺背景yo图片 */
            background-size: cover;}/* 调整背景图片大小以适应页面 */
        table {
            width: 90%;
            border: none;
            /*border-collapse: collapse;*/
        }
        th, td {
            border: 0px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }

        img {
            max-width: 100px; /* 设置最大宽度 */
            max-height: 100px; /* 设置最大高度 */
            display: block;     /* 将图片转换为块级元素 */
            margin: auto;       /* 居中显示 */
        }
        .showarea{
            background-color: white;
            border-radius: 2%; /*盒子边框圆角设置*/
            position: fixed;top:200px;left:90px;
            width:90%;/*宽度*/
            height: 700px;/*高度*/
        }
        .showarea01{
            position: fixed;top:200px;left:90px;
            width:90%;/*宽度*/
            height: 100px;/*高度*/
        }

        /*上框架——包含logo和导航*/
        .topArea{
            float:left;/*居于页面左边*/
            position: fixed;top:0px;right: 1px;
            background-color: white ;
            width:100%;/*宽度*/
            height: 175px;/*高度*/
        }
        /* 头部——图标 */
        .header_icon {
            float:left;/*居于页面左边*/
            width:200px;/*宽度*/
            height: 145px;/*高度*/
            text-align: center;/*文本居中对齐*/
            background-image: url("椰子.png"); /*设置盒子背景*/    /*当图片属于网页内容时，必须使用img元素*/ /*当图片仅用于美化页面时，必须使用背景图*/
            background-repeat: no-repeat;
            background-size: 100%; /* 调整背景图片大小以适应页面 */
        }

        /*———— 搜索条 ———— */
        /*搜索底框*/
        .search_box {
            overflow: hidden;
            width:50%;/*宽度*/
            height: 50px;/*高度*/
            text-align: left;/*文本靠左对齐*/
            /*border:5px black solid;!*盒子边框颜色*!*/
            /*background-color: #cccccc;*/
        }
        /*搜索文本条*/
        input{
            position: fixed;top: 110px;left: 400px;/*文本条位置*/
            font-size: 20px;/*文本条里面的字体大小*/
            width: 410px;/*文本条宽度*/
            border: 1px solid #e2e2e2;
            height: 50px;
            float: left;
            background-repeat: no-repeat;
            background-size: 25px;
            background-position: 5px center;
            pading:0 0 0 4px;
        }
        /* 搜索图标 */
        .search_icon {
            float: right;/*居于页面右边*/
            padding: 23px;/*盒子大小*/
            border-radius: 50%; /*盒子边框圆角设置*/
            background-image: url("搜索图标.jpg"); /*设置盒子背景*/
            background-repeat: no-repeat;
            background-size: 100%; /* 调整背景图片大小以适应页面 */
        }

    </style>

</head>
<body>

<!--购物车栏-->
<div class="showarea">
    <div class="showarea01">
        <h1 style="position: fixed;top: 210px;left: 130px">购物车(全部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) </h1>
        <button name="serachButton" style="border-radius: 20%;position:fixed; top:230px;right: 100px;;font-size:25px;border: none;width: 130px; height: 50px;color: white;background-color: saddlebrown" >结算</button></td>
    </div>
    <!--    分割线-->
    <hr   style="margin: 100px;">

    <form action="Pay.jsp" method="post" >
        <table style="position: fixed;top: 320px;overflow-y: scroll">
            <thead>
            <tr>
                <th>商品名称</th>
                <th>商品图片</th>
<%--                <th>商品类型</th>--%>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>


        <tbody>
        <%-- </c:forEach>--%>
        <% User user= (User) session.getAttribute("user");%>
        <% int i=1;
// ShopDaoImp S1=new ShopDaoImp();
// ArrayList<Shop> shopList = new ArrayList<>();
// Manage manage = (Manage) session.getAttribute("manage");
            UsercarImp ucar1=new UsercarImp();
// User user= (User) session.getAttribute("user");
            ArrayList<Buycar>carlist=new ArrayList<>();
            carlist=ucar1.findShop(user.getUname());
            String name1=null;

            for (Buycar car : carlist) {
        %>
        <tr>
            <td ><%=car.getShop()%></td>
            <td ><img src="<%=car.getUrl()%>" alt="商品图片"> </td><%-- 图片只能放在webapp下,然后可以把webapp当做一个仓库,如果其他目录有跟webapp名字相同的图片,然后就可以正常显示--%>
            <td><%=car.getPrice()%></td>
            <td><%=car.getQuantity()%></td>
            <%// 从session中移除名为"shop1"的对象
                session.setAttribute("car"+i, car);
            %>
            <a href="Pay.jsp">
                <td><button name="<%="carbutton"+i%>" >购买</button></td>
            </a>
            <%i++;%>
            <%-- <td align="center"><input type="submit" name="<%=shop.getProduct()%>" value="删除" formnovalidate></td>--%>
        </tr>
        <%
            }
        %>
        </tbody>
        </table>
    </form>

</div>

</div>



<!--头部领域--><div class="topArea" ><h1 style="font-size: 50px;position: fixed;right: 300px">这里是yeeZiWWWu.com-全球超级购物网站</h1></div>
<!--图标可视化--><div class="header_icon" style="position:fixed; top: 20px; left: 60px"></div>
<!--搜索条可视化-->
<div class="search_box" style="opacity:0.8;position:fixed; top: 110px; left: 330px" >
    <!--嵌入搜索头像-->
    <div class="search_icon" style="position: fixed;top: 115px;left: 335px;"></div>
    <input type="search" name ="search" placeholder="请输入要搜索的商品类型">
    <button name="serachButton" style="position:fixed; top:110px;right: 650px;font-size:25px;border: none;width: 130px; height: 50px;color: white;background-color: #cccccc" >搜索</button></td>
</div>

</body>
</html>




